import { Badge, Box, Button, Flex, Image, Stack, Tag, Text } from "@chakra-ui/react";
import { useBgColor } from "./styles";
import TopImg from "./assets/images/chakra-ui.png";
import { FaStar } from "react-icons/fa";

export default function Card() {
    const bgColor = useBgColor()
    return <Box bgColor={bgColor} w="sm" shadow="lg" borderRadius="lg" overflow="hidden" >
        <Image src={TopImg} />
        <Box p="4">
            <Stack direction="row" >
                <Badge colorScheme="teal" borderRadius="full">NEW</Badge>
                <Badge colorScheme="teal" borderRadius="full">REACT</Badge>
                <Badge colorScheme="teal" borderRadius="full">CHAKRA-UI</Badge>
            </Stack>
            <Text as="h3" fontSize="xl" fontWeight="semibold" p="3px 0" lineHeight="1.5" >Chakra-UI 框架专题课程</Text>
            <p>Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的UI组件. 在整个应用程序中，在任何组件上快速、轻松地引用主题中的值。组件的构建考虑到了组合。你可以利用任何组件来创造新事物。Chakra-UI 严格遵循WAI-ARIA标准。所有组件都有适当的属性和现成的键盘交互。Chakra UI 是一个简单的, 模块化的易于理解的 UI 组件库. 提供了丰富的构建 React 应用所需的UI组件. </p>
            <Box>
                <Flex align="center">
                    <Flex color="teal.100">
                        <FaStar />
                        <FaStar />
                        <FaStar />
                        <FaStar />
                    </Flex>
                    <FaStar />
                    <Text ml="1">100 评论</Text>
                </Flex>
            </Box>
        </Box>
        <Button w="100%" colorScheme="teal">登录</Button>
    </Box>
}
/**
 * h3 样式 fontSize xl
 * tag 实际是 Badge
 * 100评论处布局： 4starts, start,文字 在交叉周上下居中
 */